<route lang="json5">
{
  layout: 'default',
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    navigationStyle: 'default',
    navigationBarTitleText: '商品管理 > 商品分类',
    enablePullDownRefresh:false,
    onReachBottomDistance: 100,
  },
}
</route>

<script setup lang="ts">
import type { DeviceList } from '@/api/device'
import { ref } from 'vue'
import { useToast } from 'wot-design-uni'
import { getPayList } from '@/api/device'

const toast = useToast() // 使用 toast 提示
const page = ref(1)
const loadState = ref<'loading' | 'error' | 'finished'>('loading')
const dataList = ref([]) // 列表数据
const total = ref(50) // 总条数
function loadMore() {
  console.log('滚动到底部加载更多数据')
  if (loadState.value === 'finished') {
    return
  }
  setTimeout(() => {
    // 模拟请求数据
    if (dataList.value.length >= total.value) {
      loadState.value = 'finished'
    }
    else {
      // 每次加载20条
      for (let i = 0; i < 20; i++) {
        dataList.value.push(i)
      }
    }
  }, 1000)
}
onLoad(() => {
  // 初始化加载数据
  loadMore()
})
onReachBottom(() => {
  // 触底加载更多数据
  if (loadState.value === 'finished') {
    return
  }
  loadMore()
})
const { loading, error, data, run } = useRequest<DeviceList>(() => getPayList({ page: page.value }), { immediate: true })
// function loadMore() {
//   console.log('滚动到底部加载更多数据')
//   page.value++
//   run()
//   data.value = {
//     code: 0,
//     list: [],
//     total: 0,
//     pageNum: 0,
//     pageSize: 0,
//     text: '',
//   }
//   data.value.list.push({
//     id: page.value,
//     name: 'string;',
//     type: 'string;',
//     status: 'string;',
//     createTime: 'string;',
//     updateTime: 'string;',
//   })
//   console.log(data.value.list)
// }

// 修改商品分类弹窗代码块 start
const showEdit = ref(false)
const editRef = ref()
const formModel = ref({
  name: '',
  descr: '',
  time: '2025-09-22 11:11:29',
})
function handleSubmit() {
  editRef.value.validate().then(({ valid, errors }) => {
    if (valid) {
      console.log('表单验证通过')
      handleClose()
    }
    else {
      console.log('表单验证不通过')
    }
  })
}

const editType = ref(0)
function handleEdit(type: number = 0) {
  editType.value = type
  showEdit.value = true
  if (editRef.value) {
    editRef.value.reset()
  }
}
function handleClose() {
  if (editRef.value) {
    editRef.value.reset()
  }
  showEdit.value = false
}
// 修改商品分类弹窗代码块 end

// 商品入库弹窗代码块 start
const showRuKu = ref(false)
const rukuRef = ref()
const formModelRuKu = ref({
  lp_name: '娃娃机娃娃机',
  lp_num_p: '0',
  lp_descr: '',
  time: '2025-09-22 11:11:29',
})
function handleRuKu() {
  showRuKu.value = true
  if (rukuRef.value) {
    rukuRef.value.reset()
  }
}
function handleCloseRuKu() {
  showRuKu.value = false
}
function handleSubmitRuKu() {
  const lp_num_p = formModelRuKu.value.lp_num_p.replace(/\D/g, '')
  if (Number(lp_num_p) <= 0) {
    toast.error('商品库存必须大于0')
    return
  }
  rukuRef.value.validate().then(({ valid, errors }) => {
    if (valid) {
      console.log('表单验证通过')
      handleCloseRuKu()
    }
    else {
      console.log('表单验证不通过')
    }
  })
}
// 商品入库弹窗代码块 end
function jumpTo(url: string) {
  uni.navigateTo({
    url,
  })
}
</script>

<template>
  <view class="bottom-btn-pd">
    <view class="wot-list-top-wrap">
      <view class="wot-row wot-title">
        <wd-row>
          <wd-col :span="9">
            <view class="wot-item">
              商品名称
            </view>
          </wd-col>
          <wd-col :span="5">
            <view class="wot-item">
              进量
            </view>
          </wd-col>
          <wd-col :span="5">
            <view class="wot-item">
              销量
            </view>
          </wd-col>
          <wd-col :span="5">
            <view class="wot-item">
              存量
            </view>
          </wd-col>
        </wd-row>
      </view>
    </view>
    <view v-if="dataList.length === 0" class="pt-20">
      <wd-status-tip image="content" tip="暂无内容" />
    </view>
    <view v-else class="wot-list">
      <view v-for="(item, index) in dataList" :key="index" class="wot-row">
        <wd-row>
          <wd-col :span="9">
            <view class="wot-item">
              <wd-tag bg-color="#7232dd" custom-class="tag" @click="handleEdit">
                娃娃机娃娃机{{ index }}
              </wd-tag>
            </view>
          </wd-col>
          <wd-col :span="5">
            <view class="wot-item">
              <wd-tag bg-color="#007bff" custom-class="tag" @click="handleEdit">
                0
              </wd-tag>
            </view>
          </wd-col>
          <wd-col :span="5">
            <view class="wot-item">
              <wd-tag bg-color="#ed6a0c" custom-class="tag" @click="handleEdit">
                0
              </wd-tag>
            </view>
          </wd-col>
          <wd-col :span="5">
            <view class="wot-item">
              <wd-tag bg-color="#07c160" custom-class="tag" @click="handleEdit">
                0
              </wd-tag>
            </view>
          </wd-col>
        </wd-row>
        <view class="explain">
          说明：进量 = 入库数量, 销量 = 设备售出数量, 存量 = 当前库存数
        </view>
        <view class="options">
          <wd-tag type="primary" custom-class="tag" @click="handleEdit()">
            编辑
          </wd-tag>
          <wd-tag type="primary" custom-class="tag" @click="handleRuKu">
            商品入库
          </wd-tag>
          <wd-tag type="primary" custom-class="tag" @click="jumpTo('/pages-sub/basic/inboundLog')">
            入库日志
          </wd-tag>
        </view>
      </view>
      <wd-loadmore custom-class="loadmore" :state="loadState" @reload="loadMore" />
    </view>
    <safe-bottom>
      <wd-button type="primary" size="small" block @click="handleEdit(1)">
        新增 ＞ 商品分类
      </wd-button>
    </safe-bottom>
    <!-- 修改商品分类弹窗 start -->
    <wd-action-sheet v-model="showEdit" title="【 修改 > 商品分类 】" @close="handleClose">
      <view class="action-sheet-content">
        <wd-form ref="editRef" :model="formModel">
          <wd-cell-group>
            <wd-input
              v-model="formModel.name"
              label="分类名称"
              label-width="100px"
              prop="name"
              clearable
              placeholder="如：娃娃公仔、幸运礼盒"
              :rules="[{ required: true, message: '分类名称不能为空' }]"
            />
            <wd-textarea
              v-model="formModel.descr"
              label="备注信息"
              label-width="100px"
              type="textarea"
              :maxlength="300"
              show-word-limit
              :auto-height="true"
              placeholder="备注信息有助于你对商品的管理"
              clearable
              prop="descr"
            />
            <wd-input
              v-if="editType !== 1"
              v-model="formModel.time"
              label="添加时间"
              label-width="100px"
              prop="time"
              readonly
            />
          </wd-cell-group>
          <view class="btn-outer-pd">
            <wd-button type="primary" size="small" block @click="handleSubmit">
              提交
            </wd-button>
          </view>
        </wd-form>
      </view>
    </wd-action-sheet>
    <!-- 修改商品分类弹窗 end -->

    <!-- 商品入库弹窗 start -->
    <wd-action-sheet v-model="showRuKu" title="【 商品 >入库 】" @close="handleCloseRuKu">
      <view class="action-sheet-content">
        <wd-form ref="rukuRef" :model="formModelRuKu">
          <wd-cell-group border>
            <wd-input
              v-model="formModelRuKu.lp_name"
              label="分类名称"
              label-width="100px"
              prop="lp_name"
              clearable
              readonly
            />
            <wd-input
              v-model="formModelRuKu.lp_num_p"
              label="入库数量"
              label-width="100px"
              prop="lp_num_p"
              clearable
              placeholder="入库数量"
              :rules="[{ required: true, message: '入库数量不能为空' }]"
            />
            <wd-textarea
              v-model="formModelRuKu.lp_descr"
              label="备注信息"
              label-width="100px"
              type="textarea"
              :maxlength="300"
              show-word-limit
              :auto-height="true"
              placeholder="备注信息有助于你对商品的管理"
              clearable
              prop="lp_descr"
            />
          </wd-cell-group>
          <view class="btn-outer-pd">
            <wd-button type="primary" size="small" block @click="handleSubmitRuKu">
              提交
            </wd-button>
          </view>
        </wd-form>
      </view>
    </wd-action-sheet>
  <!-- 商品入库弹窗 end -->
  </view>
</template>

<style lang="scss" scoped>
@import '@/style/list.scss';
#app {
  height: 100vh;
  overflow: hidden;
}
.scroll-view {
    height: calc(100vh - 208rpx - env(safe-area-inset-bottom)) !important;
}
.explain {
    font-size: 24rpx;
    color: #999;
    padding: 0 6rpx;
    text-align: right;
}
.options {
    text-align: right;
}
.action-sheet-content {
    height: 500rpx;
    overflow-y: auto;
}
.wot-item {
    text-align: left;
}
</style>
